.main {
  text-align: center;
  list-style-type: none;
  padding: 0;
  user-select: none;
  margin-top: $gutter-size;

  li {
    display: inline-block;
    margin: 0 $gutter-size;
  }
}

.pagination-S {
  list-style-type:none;
  li{
    position: relative;
    display: inline-block;
    padding: 0 2px;
    a,span{
      position: relative;
      float: left;
      line-height: 30px;
      text-decoration: none;
      color: $highlight-default;;
      height: 30px;
      width: 30px;
      border-radius: 15px;
      &:hover{
        color: $highlight-secondary;
        background-color: $background-color;
      }
    }
    span[aria-label="Previous"],
    span[aria-label="Next"]
    {
      border: 2px solid $highlight-default;
      color: $highlight-default;
      cursor: pointer;
      display: block;
      font-size: $font-size-btn-lg;
      line-height: 26px;
      &:hover {
        background-color: $highlight-default;
        color: $background-color;
      }
    }
  }
  :global .active{
    a{
      background-color: $highlight-default;
      color: $background-color;
    }
  }
  :global .disabled {
    span{
      border-color: $text-color;
      color: $text-color;
    }
    span[aria-label="Previous"],
    span[aria-label="Next"]{
      display:none;
    }
  }
}

